<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="http://cdn.suoluomei.com/common/js/css/wpf/weui.css"
    />
  </head>
  <body>
    <div class="weui-tab__content" style="display: block;">
      <p class="weui-cells__title">图片自动上传</p>
      <div class="weui-cells weui-cells_form" id="uploader">
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <p class="weui-uploader__title">图片上传</p>
                <div class="weui-uploader__info">
                  <span id="uploadCount">0</span>/5
                </div>
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                <div class="weui-uploader__input-box">
                  <input
                    id="uploaderInput"
                    class="weui-uploader__input"
                    type="file"
                    accept="image/*"
                    capture="camera"
                    multiple=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p class="weui-cells__title">图片手动上传</p>
      <div class="weui-cells weui-cells_form" id="uploaderCustom">
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <p class="weui-uploader__title">图片上传</p>
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderCustomFiles"></ul>
                <div class="weui-uploader__input-box">
                  <input
                    id="uploaderCustomInput"
                    class="weui-uploader__input"
                    type="file"
                    accept="image/*"
                    multiple=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-btn-area">
        <a
          id="uploaderCustomBtn"
          href="javascript:"
          class="weui-btn weui-btn_primary"
          >上传</a
        >
      </div>
    </div>
    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
    <script>
      window.jQuery = $
      var URL = window.URL || window.webkitURL || window.mozURL
      var apiList = {
        uploadFile:
          'http://ydnshop.hepulanerp.com/sucai_t/public/index.php/post/post/uploadFile',
        label:
          'http://ydnshop.hepulanerp.com/train/public/index.php/api/Mobile/getLabel',
        submit:
          'http://ydnshop.hepulanerp.com/train/public/index.php/api/mobile/setImgScore'
      }
      var defaultParam = {
        uploadKey: 'Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO',
        apiKey: 'yzI2dPfhwI3I6yG^w2i*Oh3targlBaP*'
      }

      $('#uploaderInput').change(function(e) {
        uploadImg(e)

      })
      function uploadImg(e) {
        var files = e.target.files || e.dataTransfer.files

        for (var i = 0; i < files.length; i++) {
          ;(function(file) {
            // 可做文件类型判断
            var reader = new FileReader()
            var formData = new FormData()

            reader.onload = function() {
              formData.append('key', defaultParam.uploadKey)
              formData.append('file', file)
              renderUploadImgDom(file)
              ajaxPostFile(formData, function(data) {
                // 返回的数据
              })
            }
            reader.readAsBinaryString(file)
          })(files[i])
        }
        e.target.value = ''
      }

      /**
       * @description: 预览图片
       * @param {type}
       * @return:
       */
      function renderUploadImgDom(file) {
        $('#uploaderFiles').append(
          '<li class="weui-uploader__file"  style="background-image:url(' +
            URL.createObjectURL(file) +
            ')"></li>'
        )
      }

      /**
       * @description: 上传图片
       * @param {type}
       * @return:
       */
      function ajaxPostFile(formData, cb) {
        $.ajax({
          type: 'POST',
          url: apiList.uploadFile,
          processData: false,
          contentType: false,
          data: formData,
          dataType: 'json',
          success: function(resp) {
            cb(resp)
          }
        })
      }
    </script>
  </body>
</html>
